A<template>
	<div class="view-account">
		<div class="card-cover" v-if="userInfo">
			<img class="avatar" :src="userInfo.avatar || require('./img/avatar.png')" />
			<div class="profile">
				<div class="nickname">{{ userInfo.nickname }}</div>
				<div class="mobile">{{ userInfo.mobile }}</div>
			</div>
			<div class="btn-checkin">
				<span @click="handleCheckin">{{ checkinStatus ? '已签到' : '签到' }}</span>
			</div>
		</div>
		<div class="card-cover" v-else>
			<img class="avatar" src="./img/avatar.png">
			<div class="btn-login" @click="$router.push('/login')">登录/注册</div>
		</div>
		<div class="card-menu">
			<div @click="authSwitch('/follow')">关注({{totalInfo.followNum}})</div>
			<div @click="authSwitch('/collect?typeId=1&objectId=1')">收藏({{totalInfo.collectNum}})</div>
			<div @click="authSwitch('/collect?typeId=2&objectId=1')">点赞({{totalInfo.likeNum}})</div>
			<div @click="authSwitch('/point')">积分({{totalInfo.pointNum}})</div>
		</div>
		<div class="card-link">
			<van-cell title="我发布的闲置" @click="authSwitch('/myXzProduct')" is-link />
			<van-cell title="发布闲置" @click="authSwitch('/xzProductCreate')" is-link />
			<van-cell title="地址管理" @click="authSwitch('/shipping')" is-link />
			<van-cell title="关于我们" @click="authSwitch('/about')" is-link />
			<van-cell title="账户设置" @click="authSwitch('/userInfo')" is-link />
		</div>
		<div class="btn-wrapper">
			<van-button type="danger" @click="handleLogout">退出登录</van-button>
		</div>
	</div>
</template>
<script>
	import {
		Dialog,
	} from "vant";
	import {
		mapState,
		mapActions
	} from 'vuex'
	import userApi from '../../api/user'
	import checkinApi from '../../api/checkin'

	export default {
		data() {
			return {
				mobile: "",
				checkinStatus: false, //是否签到,
				totalInfo: {}
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				isValidLogin: state => state.user.isValidLogin
			})
		},
		watch: {
			userInfo(val) {
				if (val) {
					this.initPageData()
				}
			}
		},
		methods: {
			...mapActions([	 
			]),
			handleLogout() {
				Dialog.confirm({
						title: "退出登录",
						message: "确认退出?"
					})
					.then(() => {
						this.$store.commit("user/logOut", {
							mobile: this.mobile,
							onSuccess: () => {
								console.log("退出登录!")
								this.$router.push('/login')
							}
						})
					}).catch(() => {
						console.log("取消登录")
					});
			},
			authSwitch(url) {
				userApi.checkLogIn().then(res => {
					if (res.status === 1) {
						this.$router.push(url)
					} else {
						//this.$store.dispatch("user/showLoginPop");
						this['user/showLoginPop']();
					}
				})
			},
			getTotalInfo() {
				userApi.getTotalInfo().then(res => {
					console.log(res);
					this.totalInfo = res;
				});
			},
			initPageData() {
				this.doGetCheckInStatus();
				this.getTotalInfo();
			},
			doGetCheckInStatus() {
				checkinApi.queryCheckIn().then(res=>{
					if(+res.status === 0){
						this.checkinStatus = false;
					}else{
						this.checkinStatus = true;
					}
				});
			},		
			handleCheckin() {
				if (!this.checkinStatus) {
					checkinApi.checkIn().then(()=>{
						this.$toast("签到成功!");
						this.checkinStatus = true;
					});
				} else {
					this.$router.push('/point')
				}
			}
		},
		
		created() {
			this.initPageData();
		}
	}
</script>
<style lang="less" scoped>
	.card-cover {
		position: relative;
		display: flex;
		align-items: center;
		height: 160px;
		padding: 15px;
		color: #fff;
		background-color: #292727;
		background-size: 100%;
		box-sizing: border-box;

		.avatar {
			width: 60px;
			height: 60px;
			margin-right: 10px;
			border-radius: 50%;
		}

		.profile {
			text-align: left;
		}

		.nickname {
			font-size: 16px;
			font-weight: bold;
		}

		.mobile {
			font-size: 14px;
			margin-top: 6px;
		}

		.btn-set {
			position: absolute;
			right: 20px;
			top: 60px;
			font-size: 14px;
			line-height: 20px;
			padding: 5px 8px;
			border: 1px solid #999;
		}

		.btn-checkin {
			position: absolute;
			top: 70px;
			right: 20px;
			font-size: 14px;
			line-height: 20px;
			padding: 5px 8px;
			border: 1px solid #999;
		}
	}

	.card-menu {
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fff;

		>* {
			flex: 1;
			font-size: 14px;
			padding: 10px 0;
			text-align: center;
			border: 1px solid #f5f5f5;
			border-right: 0;
			border-left: 0;
			color: #333;
		}
	}

	.card-link {
		text-align: left;
	}

	.btn-wrapper {
		position: fixed;
		left:0;
		bottom:50px;
		box-sizing: border-box;
		padding:10px;
		width:100%;
		.van-button.van-button--danger.van-button--normal {
			width: 100%;
		}
	}
</style>
